<template>
  <div>
    <h1 class="title">{{ node.title }}</h1>
    <div id="markdown_viewer" class="content"></div>
  </div>
</template>

<script>
import * as NodeApi from '../../api/node'
import Viewer from 'tui-editor/dist/tui-editor-Viewer'

export default {
  name: 'nodeInfo',
  data() {
    return {
      id: '',
      node: {},
      viewer: null
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getNodeInfo()
  },
  methods: {
    getNodeInfo() {
      NodeApi.getNodeInfo(this.id).then(rep => {
        console.log(rep)
        this.node = rep.data
        this.initViewer()
      })
    },
    initViewer() {
      this.viewer = new Viewer({
        el: document.getElementById('markdown_viewer'),
        height: '500px',
        initialValue: this.node.content
      })
    }
  }
}
</script>

<style scoped>
.title {
  text-align: center;
}
.content {
  margin: 50px auto;
  width: 800px;
}
</style>
